﻿<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>用户自定义菜单</title>
        <link href="__PUBLIC__/js/themes/default/easy_ui.css" rel="stylesheet" type="text/css" />
        <link href="__PUBLIC__/js/themes/icon.css" rel="stylesheet" type="text/css" />
        <link href="__PUBLIC__/css/demo.css" rel="stylesheet" type="text/css" />
        <script src="__PUBLIC__/js/jquery-1.8.0.min.js" type="text/javascript"></script>
        <script src="__PUBLIC__/js/jquery.easyui.min.js" type="text/javascript"></script>
        <script src="__PUBLIC__/js/validateExpand.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function() {
                Refresh();
                loadData();
                $("#btnRelease").bind("click", ReleaseData);
                //TestPost("{:U('CustomMenu/SendToWechat')}",null);
            });
            function  TestPost(url, param) {
                $.ajax({
                    url: url,
                    type: "POST",
                    cache: true,
                    data: param,
                    success: function(data) {
                        document.write(data);
                    }
                });
            }
            function RegistSaveFun(btn, txt, type) {
                var node = $('#tt').tree('getSelected');
                if (!node) {
                    alert("请选择菜单!");
                    return false;
                }
                var v = txt.val();
                if (v == '') {
                    alert('值不允许为空!');
                    return;
                }
                if (type == 'view') {
                    if (!/(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&amp;:/~\+#]*[\w\-\@?^=%&amp;/~\+#])?/.test(v)) {
                        alert('请输入正确的URL!');
                        return;
                    }
                }
                $('#tt').tree('update', {
                    target: node.target,
                    type: type,
                    value: v
                });
                submitMenuData();
            }

            function ReleaseData() {
                $.ajax({
                    url: "{:U('CustomMenu/SendToWechat')}",
                    type: "POST",
                    cache: true,
                    beforeSend: function() {
                        $("#btnRelease .l-btn-text").text("正在发布...");
                        $("#btnRelease").unbind("click");
                    },
                    complete: function() {
                        $("#btnRelease .l-btn-text").text("发布");
                        $("#btnRelease").bind("click", ReleaseData);
                    },
                    success: function(data) {
                        if (data == 'y') {
                            alert('发布成功!');
                        }
                        else {
                            alert('发布失败!')
                        }
                    }
                });
            }

            function submitMenuData() {
                var treeData = $('#tt').tree('getRoots');
                var TreeDataStr = TreeObjToStr(treeData);
                $.ajax({
                    url: "{:U('CustomMenu/SaveMenu')}",
                    type: "POST",
                    cache: true,
                    data: {treeData: TreeDataStr},
                    success: function(data) {
                        //   document.write(TreeDataStr);return;
                        if (data == 'y') {
                            alert("保存成功!");
                            return;
                        }
                        else {
                            alert("保存失败!");
                            return;
                        }
                    }
                });
            }

            function TreeObjToStr(treeData) {
                var m = '[';
                var u = 1;
                for (var i = 0; i < treeData.length; i++) {
                    var t = treeData[i];
                    m += '{';
                    var tid = t.id == undefined ? '' : t.id;
                    var ttext = t.text == undefined ? '' : t.text;
                    var ttype = t.type == undefined ? '' : t.type;
                    var tvalue = t.value == undefined ? '' : t.value;
                    m += '\"id\":' + '\"' + tid + '\",';
                    m += '\"text\":' + '\"' + ttext + '\",';
                    m += '\"type\":' + '\"' + ttype + '\",';
                    m += '\"sort\":' + '\"' + u + '\",';
                    m += '\"messagetype\":' + '\"' + 'text' + '\",';
                    m += '\"value\":' + '\"' + tvalue + '\"';
                    if (t.children) {
                        m += ',\"children\":[';
                        for (j = 0; j < t.children.length; j++) {
                            u++;
                            var tcid = t.children[j].id == undefined ? '' : t.children[j].id;
                            var tctext = t.children[j].text == undefined ? '' : t.children[j].text;
                            var tctype = t.children[j].type == undefined ? '' : t.children[j].type;
                            var tcvalue = t.children[j].value == undefined ? '' : t.children[j].value;
                            var tcsort = t.children[j].sort == undefined ? '' : t.children[j].sort;
                            m += '{';
                            m += '\"id\":' + '\"' + tcid + '\",';
                            m += '\"text\":' + '\"' + tctext + '\",';
                            m += '\"type\":' + '\"' + tctype + '\",';
                            m += '\"messagetype\":' + '\"' + 'text' + '\",';
                            m += '\"sort\":' + '\"' + u + '\",';
                            m += '\"value\":' + '\"' + tcvalue + '\"},';
                        }
                        m = m.substring(0, m.length - 1);
                        m += ']';
                    }
                    m += '},';
                    u++;
                }
                m = m.substring(0, m.length - 1) + "]";
                return m;
            }

            var UserGroupTree = [];

            function loadData() {
                //树形初始化
                $.ajax({
                    url: "{:U('CustomMenu/GetMenu')}",
                    type: "POST",
                    cache: true,
                    dataType: "json",
                    success: function(data) {
                        UserGroupTree = data;
                        $('#tt').tree({
                            data: UserGroupTree,
                            method: 'get',
                            animate: true,
                            onContextMenu: function(e, node) {
                                e.preventDefault();
                                $(this).tree('select', node.target);
                                $('#mm').menu('show', {
                                    left: e.pageX,
                                    top: e.pageY
                                });
                            },
                            onAfterEdit: function(node) {
                                if (!ValidateTree()) {
                                    $(this).tree('beginEdit', node.target);
                                    return;
                                }
                            }
                            ,
                            onSelect: function(node) {
                                if (node.children != undefined && node.children.length > 0) {
                                    $("#kbPanel").css("display", "inline");
                                    $("#msgAndUrlPanel").css("display", "none");
                                    $("#msgPanel").css("display", "none");
                                    $("#urlPanel").css("display", "none");
                                    $("#loadPanl").css("display", "none");
                                    $("#KeyPanel").css("display", "none");
                                    return false;
                                }
                                if (node.type == "") {
                                    $("#msgAndUrlPanel").css("display", "inline");
                                    $("#msgPanel").css("display", "none");
                                    $("#urlPanel").css("display", "none");
                                    $("#kbPanel").css("display", "none");
                                    $("#loadPanl").css("display", "none");
                                    $("#KeyPanel").css("display", "none");
                                    $("#txtMsg").val('');
                                    $("#txturl").val('');
                                    $("#txtkey").val('');
                                    $("#msgAndUrlPanel").tabs("select", "发送信息");
                                    return false;
                                }
                                if (node.type == "click") {
                                    $("#msgAndUrlPanel").css("display", "none");
                                    $("#msgPanel").css("display", "inline");
                                    $("#urlPanel").css("display", "none");
                                    $("#kbPanel").css("display", "none");
                                    $("#loadPanl").css("display", "none");
                                    $("#KeyPanel").css("display", "none");
                                    $("#txtMsgSin").val(node.value);
                                    return false;
                                }
                                if (node.type == "view") {
                                    $("#msgAndUrlPanel").css("display", "none");
                                    $("#msgPanel").css("display", "none");
                                    $("#kbPanel").css("display", "none");
                                    $("#urlPanel").css("display", "inline");
                                    $("#loadPanl").css("display", "none");
                                    $("#KeyPanel").css("display", "none");
                                    $("#txtUrlSin").val(node.value);
                                    return false;
                                }
                                if (node.type == "key") {
                                    $("#msgAndUrlPanel").css("display", "none");
                                    $("#msgPanel").css("display", "none");
                                    $("#kbPanel").css("display", "none");
                                    $("#urlPanel").css("display", "none");
                                    $("#loadPanl").css("display", "none");
                                    $("#KeyPanel").css("display", "inline");
                                    $("#txtKeySin").val(node.value);
                                    return false;
                                }
                            }
                        });
                    }
                });
            }

            function append() {
                var t = $('#tt');
                var node = t.tree('getSelected');
                if (node.children == undefined) {
                    if (confirm("使用二级菜单后,当前编辑的消息将会被清除,确定使用二级菜单?")) {
                        $('#tt').tree('update', {
                            target: node.target,
                            type: '',
                            value: ''
                        });
                    }
                    else {
                        return false;
                    }
                }
                t.tree('append', {
                    parent: (node ? node.target : null),
                    data: [{
                            text: 'new item',
                            id: '',
                            type: "",
                            value: ""
                        }]
                });
            }

            function appendFirst() {
                var t = $('#tt');
                t.tree('append', {
                    parent: null,
                    data: [{
                            text: 'new item',
                            id: '',
                            type: "",
                            value: ""
                        }]
                });
            }

            function editTree() {
                var node = $('#tt').tree('getSelected');
                $('#tt').tree('beginEdit', node.target);
            }
            function collapse() {
                var node = $('#tt').tree('getSelected');
                var root = $('#tt').tree('getRoots');
                if ($('#tt').tree('getParent', node.target) == null) {
                    for (var i = 0; i < root.length; i++) {
                        if (node.text == root[i].text) {
                            if (i == root.length - 1) {
                                return;
                            }
                            root[i] = root[i + 1];
                            root[i + 1] = node;
                            $('#tt').tree('reload', null);
                            $('#tt').tree('loadData', root);
                            $('#tt').tree('check', node.target);
                            var findNode = $('#tt').tree('find', node.id);
                            $('#tt').tree('select', findNode.target);
                            return;
                        }
                    }
                }
                else if ($('#tt').tree('getParent', node.target) != null) {
                    var p = $('#tt').tree('getParent', node.target);
                    for (var i = 0; i < root.length; i++) {
                        if (root[i].text == p.text) {
                            for (var e = 0; e < root[i].children.length; e++) {
                                if (root[i].children[e].text == node.text) {
                                    if (e == root[i].children.length - 1) {
                                        return;
                                    }
                                    root[i].children[e] = root[i].children[e + 1];
                                    root[i].children[e + 1] = node;
                                    $('#tt').tree('reload', null);
                                    $('#tt').tree('loadData', root);
                                    $('#tt').tree('check', node.target);
                                    var findNode = $('#tt').tree('find', node.id);
                                    $('#tt').tree('select', findNode.target);
                                    return;
                                }
                            }
                        }
                    }
                }
            }
            function expand() {
                var node = $('#tt').tree('getSelected');
                var root = $('#tt').tree('getRoots');
                if ($('#tt').tree('getParent', node.target) == null) {
                    for (var i = 0; i < root.length; i++) {
                        if (node.text == root[i].text) {
                            if (i == 0) {
                                return;
                            }
                            root[i] = root[i - 1];
                            root[i - 1] = node;
                            $('#tt').tree('reload', null);
                            $('#tt').tree('loadData', root);
                            var findNode = $('#tt').tree('find', node.id);
                            $('#tt').tree('select', findNode.target);
                            return;
                        }
                    }
                }
                else if ($('#tt').tree('getParent', node.target) != null) {
                    var p = $('#tt').tree('getParent', node.target);
                    for (var i = 0; i < root.length; i++) {
                        if (root[i].text == p.text) {
                            for (var e = 0; e < root[i].children.length; e++) {
                                if (root[i].children[e].text == node.text) {
                                    if (e == 0) {
                                        return;
                                    }
                                    root[i].children[e] = root[i].children[e - 1];
                                    root[i].children[e - 1] = node;
                                    $('#tt').tree('reload', null);
                                    $('#tt').tree('loadData', root);
                                    var findNode = $('#tt').tree('find', node.id);
                                    $('#tt').tree('select', findNode.target);
                                    return;
                                }
                            }
                        }
                    }
                }
            }
            function remove() {
                var node = $('#tt').tree('getSelected');
                $('#tt').tree('remove', node.target);
            }
            //重新加载Tree数据
            function LoadTreeData() {
                $('#tt').tree("reload");
            }

            function Refresh() {
                $("#mydiv").bind('contextmenu', function(e) {
                    e.preventDefault();
                    $('#mm').menu('show', {
                        left: e.pageX,
                        top: e.pageY
                    });
                });
            }

            function byteLength(s) {
                var totalLength = 0;
                var i;
                var charCode;
                for (i = 0; i < s.length; i++) {
                    charCode = s.charCodeAt(i);
                    if (charCode < 0x007f) {
                        totalLength = totalLength + 1;
                    } else if ((0x0080 <= charCode) && (charCode <= 0x07ff)) {
                        totalLength += 2;
                    } else if ((0x0800 <= charCode) && (charCode <= 0xffff)) {
                        totalLength += 3;
                    }
                }
                return totalLength;
            }
            function ValidateTree() {
                var flag = true;
                var treeData = $('#tt').tree('getRoots');
                if (treeData.length > 3) {
                    flag = false;
                    alert("一级菜单最多只能设置3个!");
                    return flag;
                }

                for (var i = 0; i < treeData.length; i++) {
                    var t = treeData[i].text;
                    if (/^[\u4E00-\u9FA5]+$/.test(t)) {
                        if (parseInt(byteLength(t), 10) > 12) {
                            flag = false;
                            alert("一级菜单名称不得多于4个汉字!");
                            return flag;
                        }
                    }
                    else {
                        if (parseInt(byteLength(t), 10) > 8) {
                            flag = false;
                            alert("一级菜单名称不得多于4个汉字或8个字母!");
                            return flag;
                        }
                    }
                    var childrenTree = treeData[i].children;
                    if (childrenTree != null && childrenTree != undefined) {
                        for (var p = 0; p < childrenTree.length; p++) {
                            var c = childrenTree[p].text;
                            if (/^[\u4E00-\u9FA5]+$/.test(c)) {
                                if (parseInt(byteLength(c), 10) > 24) {
                                    flag = false;
                                    alert("二级菜单名称不得多于8个汉字!");
                                    return flag;
                                }
                            }
                            else {
                                if (parseInt(byteLength(c), 10) > 16) {
                                    flag = false;
                                    alert("二级菜单名称不得多于8个汉字或16个字母!");
                                    return flag;
                                }
                            }
                        }
                    }
                }
                return flag;
            }

        </script>
    </head>
    <body class="easyui-layout">
        <!--左边-->
        <div data-options="region:'west',split:true,title:'自定义菜单'" style="width: 150px; padding: 10px;"
             id="mydiv">
            <ul id="tt" class="easyui-tree">
            </ul>
            <div id="mm" class="easyui-menu" style="width: 120px;">
                <div onclick="append()" data-options="iconCls:'icon-add'">
                    <span>添加</span>
                    <div style="width: 120px">
                        <div onclick="appendFirst()">
                            一级菜单</div>
                        <div onclick="append()">
                            子菜单</div>
                    </div>
                </div>
                <div onclick="editTree()" data-options="iconCls:'icon-edit'">
                    编辑</div>
                <div onclick="remove()" data-options="iconCls:'icon-remove'">
                    移除</div>
                <div class="menu-sep">
                </div>
                <div onclick="expand()">
                    上移</div>
                <div onclick="collapse()">
                    下移</div>
            </div>
        </div>
        <!--右边-->
        <div data-options="region:'center',title:'编辑'">
            <!--消息和URL和Key-->
            <div id="msgAndUrlPanel" class="easyui-tabs" style="width:500px;height:250px;display: none">  
                <div title="发送信息" data-options="closable:false" style="padding:20px;" id="sendMsg">
                    <table>
                        <tr>
                            <td>
                                订阅者点击该子菜单会收到以下消息
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <textarea id="txtMsg"  required="true" name="txtMsg" style=" width: 400px; height: 100px"></textarea>
                            </td>
                        </tr>
                        <tr><td>
                                <a id="btnSaveMsg" href="javascript:void(0)" onclick='RegistSaveFun($("#btnSaveMsg"), $("#txtMsg"), "click")' class="easyui-linkbutton" data-options="iconCls:'icon-save'">
                                    保存</a>
                            </td></tr>
                    </table>

                </div>  
                <div title="跳转到网页" data-options="closable:false" id="sendURL" style="overflow:auto;padding:20px;">  
                    <table>
                        <tr><td>
                                订阅者点击该子菜单会跳到以下链接
                            </td></tr>
                        <tr><td>
                                <textarea id="txturl"  required="true" name="txturl" style=" width: 400px; height: 100px"></textarea>
                            </td></tr>
                        <tr><td>
                                <a id="btnSaveUrl" href="javascript:void(0)" onclick='RegistSaveFun($("#btnSaveUrl"), $("#txturl"), "view")' class="easyui-linkbutton" data-options="iconCls:'icon-save'">
                                    保存</a>
                            </td></tr>
                    </table>
                </div> 

                <div title="自定义回复key" data-options="closable:false" id="sendkey" style="overflow:auto;padding:20px;">  
                    <table>
                        <tr><td>
                                订阅者点击该子菜单会按该key值处理逻辑
                            </td></tr>
                        <tr><td>
                                <textarea id="txtkey"  required="true" name="txtkey" style=" width: 400px; height: 100px"></textarea>
                            </td></tr>
                        <tr><td>
                                <a id="btnSaveUrl" href="javascript:void(0)" onclick='RegistSaveFun($("#btnSaveKey"), $("#txtkey"), "key")' class="easyui-linkbutton" data-options="iconCls:'icon-save'">
                                    保存</a>
                            </td></tr>
                    </table>
                </div>  

            </div>  
            <!--消息-->    
            <div id="msgPanel" class="easyui-tabs" style="width:500px;height:250px;display: none">  
                <div title="发送信息" data-options="closable:false" style="padding:20px;">
                    <table>
                        <tr>
                            <td>
                                订阅者点击该子菜单会收到以下消息
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <textarea id="txtMsgSin"  required="true" name="txtMsgSin" style=" width: 400px; height: 100px"></textarea>
                            </td>
                        </tr>
                        <tr><td>
                                <a id="btnSaveMsgSin" href="javascript:void(0)" onclick='RegistSaveFun($("#btnSaveMsgSin"), $("#txtMsgSin"), "click")' class="easyui-linkbutton" data-options="iconCls:'icon-save'">
                                    保存</a>
                            </td></tr>
                    </table>
                </div>  
            </div> 
            <!--URL-->    
            <div id="urlPanel" class="easyui-tabs" style="width:500px;height:250px; display: none">  
                <div title="跳转到网页" data-options="closable:false" style="overflow:auto;padding:20px;">  
                    <table>
                        <tr><td>
                                订阅者点击该子菜单会跳到以下链接
                            </td></tr>
                        <tr><td>
                                <textarea id="txtUrlSin"  required="true" name="txtUrlSin" style=" width: 400px; height: 100px"></textarea>
                            </td></tr>
                        <tr><td>
                                <a id="btnSaveURLSin" href="javascript:void(0)" onclick='RegistSaveFun($("#btnSaveURLSin"), $("#txtUrlSin"), "view")' class="easyui-linkbutton" data-options="iconCls:'icon-save'">
                                    保存</a>
                            </td></tr>
                    </table>
                </div>  
            </div>
            <!--Key-->    
            <div id="KeyPanel" class="easyui-tabs" style="width:500px;height:250px; display: none">  
                <div title="自定义回复key" data-options="closable:false" style="overflow:auto;padding:20px;">  
                    <table>
                        <tr><td>
                                订阅者点击该子菜单会按该key值处理逻辑
                            </td></tr>
                        <tr><td>
                                <textarea id="txtKeySin"  required="true" name="txtKeySin" style=" width: 400px; height: 100px"></textarea>
                            </td></tr>
                        <tr><td>
                                <a id="btnSaveKeySin" href="javascript:void(0)" onclick='RegistSaveFun($("#btnSaveKeySin"), $("#txtKeySin"), "key")' class="easyui-linkbutton" data-options="iconCls:'icon-save'">
                                    保存</a>
                            </td></tr>
                    </table>
                </div>  
            </div>
            <!--一级菜单有子菜单时点击显示面板-->    
            <div id="kbPanel"  class="easyui-tabs" style="width:500px;height:250px; display: none">  
                <div  title="系统消息" data-options="closable:false" style="overflow:auto;padding:20px;">  
                    <table>
                        <tr><td>
                                已有子菜单，无法设置动作
                            </td></tr>
                        <tr><td>

                            </td></tr>

                    </table>
                </div>  
            </div>  
            <!--刚进来时显示面板-->    
            <div id="loadPanl"  class="easyui-tabs" style="width:500px;height:250px; display:inline">  
                <div  title="系统消息" data-options="closable:false" style="overflow:auto;padding:20px;">  
                    <table>
                        <tr><td>
                                选择左边菜单设置菜单动作。
                            </td></tr>
                        <tr><td>

                            </td></tr>

                    </table>
                </div>  
            </div>  
            <div  class="easyui-panel" title="发布"    
                  style="width:500px;height:150px; padding-left: 20px; padding-top: 25px"  
                  data-options="closable:false,
                  collapsible:false,minimizable:false,maximizable:false">        
                <table>
                    <tr>
                        <td>
                            编辑中的菜单不能直接在用户手机上生效，你需要进行发布，发布后24小时内所有的用户都将更新到新的菜单。
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <a id="btnRelease"  href="javascript:void(0)"  class="easyui-linkbutton" data-options="iconCls:'icon-ok'">
                                发布</a>
                        </td>
                    </tr>
                </table>
            </div>  
        </div>
    </body>
</html>
